<template>
	<view>
		<view class="topic-bg">
			<image src="../../static/demo/topicpic/13.jpeg" mode="aspectFill" lazy-load></image>
		</view>

		<view class="topic-info">
			<!-- 头像 -->
			<view class="topic-info-icon flex-ac">
				<image src="../../static/demo/topicpic/13.jpeg" mode="widthFix" lazy-load></image>
				<view>#忆往事，敬余生#</view>
			</view>
			<!-- 相关数据 -->
			<view class="topic-info-data flex-ac">
				<view>动态 793</view>
				<view>今日 641</view>
			</view>
			<!-- 描述信息 -->
			<view class="topic-info-description">
				面试官:在电梯里巧遇马云你会做什么?90后女孩的向答当场被录用
			</view>
		</view>
		<!-- 页面的切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabChange="changeTab" :scrollItemStyle="'width:50%'">
		</swiper-tab-head>
		<view class="topic-info-data">
			<block v-for="(item,index) in tablist" :key="index">
				<template v-if="tabIndex==index">
					<block v-for="(itemSub,indexSub) in item.list" :key="indexSub">
						<common-list :item="itemSub" :index="indexSub"></common-list>
					</block>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	export default {
		components: {
			swiperTabHead
		},

		data() {
			return {
				swiperHeight: 1000,
				tabIndex: 0,
				tabBars: [{
					name: "关注",
					id: "guanzhu"
				}, {
					name: "话题",
					id: "huati"
				}],
				tablist: [{ //默认
					loadText: "上拉加载更多",
					list: [ //图文数据
						{
							userpic: '../../static/demo/userpic/19.jpg',
							username: "刘诗诗",
							sex: 1, //0 男 1 女
							age: 28,
							isFollow: false,
							title: "我不懂得你眉眼间若有若无的黯然,但我希望能化解它!",
							titlePic: "../../static/demo/datapic/15.jpg",
							video: false,
							share: false,
							path: "长沙 芙蓉区",
							shareNum: 305,
							commonNum: 101,
							goodNum: 782
						},
						//视频数据
						{
							userpic: '../../static/demo/userpic/7.jpg',
							username: "金星",
							sex: 1, //0 男 1 女
							age: 36,
							isFollow: false,
							title: "幻想属于黑夜，白天经不起浪费。",
							titlePic: "../../static/demo/datapic/17.jpg",
							video: {
								lookNum: "200w",
								long: "3:14"
							},
							share: false,
							path: "北京 朝阳区",
							shareNum: 359,
							commonNum: 211,
							goodNum: 982
						}
					], //关注
				}, { // 最新
					loadText: "上拉加载更多...",
					list: [ //文字
						{
							userpic: '../../static/demo/userpic/20.jpg',
							username: "胡歌",
							sex: 0, //0 男 1 女
							age: 31,
							isFollow: false,
							title: "如果皮囊无法修复，就用思想去填满它。",
							video: false,
							share: false,
							path: "长沙 雨花区",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						},
						//图文
						{
							userpic: '../../static/demo/userpic/19.jpg',
							username: "刘诗诗",
							sex: 1, //0 男 1 女
							age: 28,
							isFollow: false,
							title: "我不懂得你眉眼间若有若无的黯然,但我希望能化解它!",
							titlePic: "../../static/demo/datapic/15.jpg",
							video: false,
							share: false,
							path: "长沙 芙蓉区",
							shareNum: 305,
							commonNum: 101,
							goodNum: 782
						}
					],
				}]
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新功能
			// setTimeout(()=>{
			// 	let arr = [{
			// 	userpic: '../../static/demo/userpic/20.jpg',
			// 	username: "胡歌",
			// 	sex: 0, //0 男 1 女
			// 	age: 31,
			// 	isFollow: false,
			// 	title: "如果皮囊无法修复，就用思想去填满它。",
			// 	video: false,
			// 	share: false,
			// 	path: "长沙 雨花区",
			// 	shareNum: 352,
			// 	commonNum: 111,
			// 	goodNum: 820
			// }]
			// 	this.tablist[this.tabIndex].list=arr;
			// 	uni.stopPullDownRefresh();
			// },2000)
			this.getData();
		},
		methods: {
			getData() {
				setTimeout(() => {
					let arr = [{
							userpic: '../../static/demo/userpic/21.jpg',
							username: "周絮",
							sex: 0, //0 男 1 女
							age: 27,
							isFollow: false,
							title: "四季花常在,九州事尽知。",
							video: false,
							share: false,
							path: "四季山庄",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						},
						{
							userpic: '../../static/demo/userpic/22.jpg',
							username: "温客行",
							sex: 0, //0 男 1 女
							age: 26,
							isFollow: false,
							title: "人贵乎二品，一为仁，二为勇。先贤论世间勇者，分为气勇、血勇、骨勇、神勇，皆为少年之勇",
							titlePic: "../../static/demo/datapic/48.jpg",
							video: {
								lookNum: "800w",
								long: "13:14"
							},
							share: false,
							path: "青崖山 鬼谷",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						}
					]
					this.tablist[this.tabIndex].list = arr;
					uni.stopPullDownRefresh();
				}, 2000)
			},
			changeTab(index) {
				this.tabIndex = index;
			},
			tabchange(event) {
				this.tabIndex = event.detail.current;
			}
		}
	}
</script>

<style>
	/* 背景图片设置 */
	.topic-bg {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
		position: relative;
	}

	.topic-bg image {
		width: 100%;
		filter: blur(15rpx);
		position: absolute;
	}

	/* 话题相关数据 */
	.topic-info {
		padding: 0 20rpx;
	}

	.topic-info-icon {
		position: relative;
	}

	.topic-info-icon image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		position: absolute;
		top: -75rpx;
		margin-left: 15rpx;
	}

	.topic-info-icon>view {
		margin-left: 190rpx;
		flex: 1;
		font-size: 36rpx;
		font-weight: 600;
	}

	.topic-info-data {
		padding: 50rpx 0 15rpx 0;
	}

	.topic-info-data>view {
		color: #7b7b7b;
		font-size: 30rpx;
	}

	.topic-info-data>view:last-child {
		margin-left: 15rpx;
	}

	.topic-info-description {
		color: #a3a3a3;
		font-size: 33rpx;
		text-align: justify;
	}
</style>
